<template>
  <div ref="panelList" class="panel-list">
    <!-- 拖动区域 -->
    <el-scrollbar>
      <div class="drag-area">
        <!-- 待解决 -->
        <div class="area" :style="areaStyle" @drop="drop($event, 0)">
          <div class="content">
            <MoveRect
              v-for="(item, index) in willResolveList"
              :key="item.issueId"
              :colorList="colorList"
              :index="index"
              :item="item"
              @dragendEvent="dragendEvent"
              @dragstartEvent="dragstartEvent"
            />
          </div>
        </div>
        <!-- 解决中 -->
        <div class="area" :style="areaStyle" @drop="drop($event, 1)">
          <div class="content">
            <MoveRect
              v-for="(item, index) in resolvingList"
              :key="item.issueId"
              :colorList="colorList"
              :index="index"
              :item="item"
              @dragendEvent="dragendEvent"
              @dragstartEvent="dragstartEvent"
            />
          </div>
        </div>
        <!-- 已解决 -->
        <div class="area" :style="areaStyle" @drop="drop($event, 2)">
          <div class="content">
            <MoveRect
              v-for="(item, index) in resolvedList"
              :key="item.issueId"
              :colorList="colorList"
              :index="index"
              :item="item"
              @dragendEvent="dragendEvent"
              @dragstartEvent="dragstartEvent"
            />
          </div>
        </div>
        <!-- 未解决 -->
        <div class="area" :style="areaStyle" @drop="drop($event, 3)">
          <div class="content">
            <MoveRect
              v-for="(item, index) in unsolvedList"
              :key="item.issueId"
              :colorList="colorList"
              :index="index"
              :item="item"
              @dragendEvent="dragendEvent"
              @dragstartEvent="dragstartEvent"
            />
          </div>
        </div>
        <!-- 完成 -->
        <div class="area" :style="areaStyle" @drop="drop($event, 4)">
          <div class="content">
            <MoveRect
              v-for="(item, index) in completeList"
              :key="item.issueId"
              :colorList="colorList"
              :index="index"
              :item="item"
              @dragendEvent="dragendEvent"
              @dragstartEvent="dragstartEvent"
            />
          </div>
        </div>
      </div>
    </el-scrollbar>
    <!-- 标题区域 -->
    <div class="title-area">
      <div class="title" :style="setColor(colorList[0])">
        {{ $t('Issue.willResolve') }}（{{ willResolveList.length }}）
      </div>
      <div class="title" :style="setColor(colorList[1])">
        {{ $t('Issue.resolving') }}（{{ resolvingList.length }}）
      </div>
      <div class="title" :style="setColor(colorList[2])">
        {{ $t('Issue.resolved') }}（{{ resolvedList.length }}）
      </div>
      <div class="title" :style="setColor(colorList[3])">
        {{ $t('Issue.unResolved') }}（{{ unsolvedList.length }}）
      </div>
      <div class="title" :style="setColor(colorList[4])">
        {{ $t('Issue.closed') }}（{{ completeList.length }}）
      </div>
    </div>
  </div>
</template>
<script>
import MoveRect from './MoveRect'

export default {
  name: 'PanelList',
  components: { MoveRect },
  props: {
    tableData: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      // 当前问题
      sessionIssueList: [],
      // 待解决
      willResolveList: [],
      // 解决中
      resolvingList: [],
      // 已解决
      resolvedList: [],
      // 未解决
      unsolvedList: [],
      // 完成
      completeList: [],
      // 每个容器头部的颜色
      colorList: ['#4a9ff9', '#f9944a', '#2ac06d', '#a6a9ad', '#f94a4a'],
      // 拖动目标的基本信息
      targetInfo: {},
      // 当前拖动对象的基本信息
      currentDrageInfo: {},
      // 拖动开始
      isDragStart: false
    }
  },
  computed: {
    areaStyle() {
      return {
        border: this.isDragStart ? '3px dashed green' : 'none',
        backgroundColor: this.isDragStart ? 'greenyellow' : ''
      }
    }
  },
  watch: {
    tableData: {
      handler: function() {
        this.query()
      },
      deep: true
    }
  },
  created() {
    this.query()
  },
  mounted() {
    document.addEventListener('dragenter', this.dragenter)
    document.addEventListener('dragover', this.dragover)
  },
  methods: {
    query() {
      this.sessionIssueList = this.tableData
      this.willResolveList = []
      this.resolvingList = []
      this.resolvedList = []
      this.unsolvedList = []
      this.completeList = []
      for (let i = 0, len = this.sessionIssueList.length; i < len; i++) {
        switch (this.sessionIssueList[i].issueStatus) {
          // 待解决
          case 0:
            this.willResolveList.push(this.sessionIssueList[i])
            break
          // 解决中
          case 1:
            this.resolvingList.push(this.sessionIssueList[i])
            break
          // 已解决
          case 2:
            this.resolvedList.push(this.sessionIssueList[i])
            break
          // 未解决
          case 3:
            this.unsolvedList.push(this.sessionIssueList[i])
            break
          // 完成
          default:
            this.completeList.push(this.sessionIssueList[i])
            break
        }
      }
    },

    /** 设置颜色 */
    setColor(color) {
      return {
        backgroundColor: color
      }
    },

    dragenter(e) {
      e.preventDefault()
    },

    dragover(e) {
      e.preventDefault()
    },

    /** 被拖动对象进入目标对象 */
    dragenterArea(e, issueStatus) {
      /** 被拖动对象与进入的目标对象不属于一个分组才修改样式 */
      if (this.currentDrageInfo.issueStatus !== issueStatus) {
        /** 只改变冒泡路径里面的area dom 的样式 */
        for (let i = 0, len = e.path.length; i < len; i++) {
          if (e.path[i].className.indexOf('area') !== -1) {
            e.path[i].style.border = '3px dashed green'
            e.path[i].style.backgroundColor = 'greenyellow'
            return
          }
        }
      }
    },

    dragoverArea(e, issueStatus) {
      if (this.currentDrageInfo.issueStatus !== issueStatus) {
        /** 只改变冒泡路径里面的area dom 的样式 */
        for (let i = 0, len = e.path.length; i < len; i++) {
          if (e.path[i].className.indexOf('area') !== -1) {
            e.path[i].style.border = '3px dashed green'
            e.path[i].style.backgroundColor = 'greenyellow'
            return
          }
        }
      }
    },

    dragleaveArea(e, issueStatus) {
      for (let i = 0, len = e.path.length; i < len; i++) {
        if (e.path[i].className.indexOf('area') !== -1) {
          e.path[i].style.border = ''
          e.path[i].style.backgroundColor = ''
          return
        }
      }
    },

    /** 放置到目标区域触发的方法，在dragend之前触发 */
    drop(e, issueStatus) {
      this.targetInfo.issueStatus = issueStatus
      const areaList = this.$refs['panelList'].querySelectorAll('.area')
      /** 只改变冒泡路径里面的area dom 的样式 */
      for (let i = 0, len = areaList.length; i < len; i++) {
        areaList[i].style.border = ''
        areaList[i].style.backgroundColor = ''
      }
    },

    /** 拖动开始 */
    dragstartEvent(currentDrageInfo) {
      this.isDragStart = true
      this.currentDrageInfo = currentDrageInfo
    },
    /** 拖动结束 */
    dragendEvent(currentDrageInfo) {
      this.isDragStart = false
      /** 目标对象必须有值 */
      if (this.targetInfo.issueStatus || this.targetInfo.issueStatus === 0) {
        /** 被拖拽的对象与目标对象不属于同一分类的时候 */
        if (currentDrageInfo.issueStatus !== this.targetInfo.issueStatus) {
          let item = null
          /** 判断被拖拽对象属于哪个list分组 */
          switch (currentDrageInfo.issueStatus) {
            // 待解决
            case 0:
              /** 从原来分组删除自己 */
              item = this.willResolveList.splice(currentDrageInfo.index, 1)[0]
              /** 将被拖拽的对象状态值修改为目标分组的状态值 */
              item.issueStatus = this.targetInfo.issueStatus
              break
            // 解决中
            case 1:
              /** 从原来分组删除自己 */
              item = this.resolvingList.splice(currentDrageInfo.index, 1)[0]
              /** 将被拖拽的对象状态值修改为目标分组的状态值 */
              item.issueStatus = this.targetInfo.issueStatus
              break
            // 已解决
            case 2:
              /** 从原来分组删除自己 */
              item = this.resolvedList.splice(currentDrageInfo.index, 1)[0]
              /** 将被拖拽的对象状态值修改为目标分组的状态值 */
              item.issueStatus = this.targetInfo.issueStatus
              break
            // 未解决
            case 3:
              /** 从原来分组删除自己 */
              item = this.unsolvedList.splice(currentDrageInfo.index, 1)[0]
              /** 将被拖拽的对象状态值修改为目标分组的状态值 */
              item.issueStatus = this.targetInfo.issueStatus
              break
            // 完成
            default:
              /** 从原来分组删除自己 */
              item = this.completeList.splice(currentDrageInfo.index, 1)[0]
              /** 将被拖拽的对象状态值修改为目标分组的状态值 */
              item.issueStatus = this.targetInfo.issueStatus
              break
          }
          /** 判断目标对象属于哪个list分组 */
          switch (this.targetInfo.issueStatus) {
            // 待解决
            case 0:
              /** 将修改后的被拖拽对象插入到目标分组中 */
              this.willResolveList.push(item)
              break
            // 解决中
            case 1:
              /** 将修改后的被拖拽对象插入到目标分组中 */
              this.resolvingList.push(item)
              break
            // 已解决
            case 2:
              /** 将修改后的被拖拽对象插入到目标分组中 */
              this.resolvedList.push(item)
              break
            // 未解决
            case 3:
              /** 将修改后的被拖拽对象插入到目标分组中 */
              this.unsolvedList.push(item)
              break
            // 完成
            default:
              /** 将修改后的被拖拽对象插入到目标分组中 */
              this.completeList.push(item)
              break
          }
          this.changeState(item)
        }
      }
    },
    changeState(item) {
      this.$bus.$emit('issue-state-edit', item)
    }
  }
}
</script>
<style lang="scss" scoped>
.panel-list {
  height: 100%;
  min-width: 1000px;
  position: relative;
}
.title-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: flex-end;
  padding-left: 20px;
  padding-right: 10px;
  background: #fff;
  .title {
    margin-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 18px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    user-select: none;
  }
  .title:last-child {
    margin-right: 0;
  }
}
.el-scrollbar {
  height: 100%;
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
.drag-area {
  overflow: hidden;
  padding-top: 80px;
  display: flex;
  padding-left: 20px;
  padding-right: 10px;
}
.area {
  flex: 1;
  margin-right: 30px;
  background: #f0f0f0;
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 18px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    user-select: none;
  }
  .content {
    min-height: 200px;
    padding: 10px 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
}
.area:last-child {
  margin-right: 0px;
}
</style>
